<template>
  <div class="rightContent">
    <right-top/>
    <right-bottom/>
    <!-- <div class="divStyle divItem-1">
      <item-card-title class="titleSty" title-name="项目全景沙盘" />
    </div>
    <div class="divStyle divItem-2">
      <item-card-title class="titleSty" title-name="最后1小时   人员在场Top3" />
      <dv-scroll-board :config="config" style="width:100%;height:100%" />
    </div>
    <div class="divStyle divItem-3">
      <item-card-title class="titleSty" title-name="最后1小时   人员行走Top10" />
      <dv-scroll-board :config="config3" style="width:100%;height:73%" />
    </div>
    <div class="divStyle divItem-4">
      <item-card-title class="titleSty" title-name="最后1小时   车辆在场Top3" />
      <dv-scroll-board :config="config" style="width:100%;height:100%" />
    </div>
    <div class="divStyle divItem-5">
      <item-card-title class="titleSty" title-name="最后1小时   车辆行驶Top10" />
      <dv-scroll-board :config="config2" style="width:100%;height:73%" />
      <!-- <item-card-scroll-board :conf="confData2" style="width:100%;height:90%" />
    </div> -->
  </div>
</template>

<script>
import { getProTypeExce } from '@/api/interface'
import itemCardTitle from './itemCardTitle'
import itemCardScrollBoard from './itemCardScrollBoard'
import rightTop from './rightTop'
import rightBottom from './rightBottom'

export default {
  name: 'rightContent',
  components: {
    itemCardTitle,
    itemCardScrollBoard,
    rightTop,
    rightBottom
  },
  data () {
    return {
      config: {
        data: [
          ['工区名D', '120人', '查看详情>>'],
          ['工区名E', '120人', '查看详情>>'],
          ['工区名F', '120人', '查看详情>>']
        ],
        align: ['center', 'center', 'center'],
        oddRowBGC: 'rgba(24,104,242,0.71);',
        evenRowBGC: '#072256'
      },
      config3: {
        data: [
          ['姓名1', '工区名D', '5公里'],
          ['姓名2', '工区名E', '9公里'],
          ['姓名3', '工区名F', '15公里'],
          ['姓名4', '工区名D', '5公里'],
          ['姓名5', '工区名B', '9公里'],
          ['姓名6', '工区名A', '15公里']
        ],
        align: ['center', 'center', 'center'],
        oddRowBGC: 'rgba(24,104,242,0.71);',
        evenRowBGC: '#072256'
      },
      config2: {
        data: [
          ['车辆2', '120人'],
          ['车辆3', '120人'],
          ['车辆4', '120人'],
          ['车辆1', '120人'],
          ['车辆5', '120人'],
          ['车辆6', '120人'],
          ['车辆7', '120人'],
          ['车辆8', '120人'],
          ['车辆9', '120人'],
          ['车辆10', '120人']
        ],
        align: ['center', 'center'],
        oddRowBGC: '#06266F',
        evenRowBGC: '#072256'
      }
    }
  },
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.rightContent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;

  .titleSty {
    margin-bottom: 5px;
  }

  .divStyle {
    opacity: 0.76;
    background-image: linear-gradient(90deg, #0e1451 0%, #151643 100%);
    border: 1px solid #5f72c2;
    box-shadow: inset 0 0 10px 0 #556ac3;
    border-radius: 6px;
    background: #09104a;
    overflow: hidden;
  }
  .divItem-1 {
    position: relative;
    width: 100%;
    height: 19.3%;
  }
  .divItem-2 {
    width: 100%;
    height: 15.1%;
  }
  .divItem-3 {
    width: 100%;
    height: 19.5%;
  }
  .divItem-4 {
    width: 100%;
    height: 15.1%;
  }
  .divItem-5 {
    width: 100%;
    height: 19.5%;
  }
}
</style>
